<template>
  <view :data-theme="globPrimary">
    <u-navbar title="记笔记">
      <edu-button
        slot="right"
        class="header-btn"
        type="text"
        size="mini"
        hover-class="none"
        :disabled="isEmpty"
        @click="addNote"
        >提交</edu-button
      >
    </u-navbar>
    <view class="note-wrapper"
      ><u-input v-model="content" type="textarea" :maxlength="maxlength"
    /></view>
    <view class="note-bottom">
      <u-checkbox v-model="status" :active-color="globPrimaryColor">公开</u-checkbox>
      <view>{{ `${content.length}/${maxlength}` }}</view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      content: '',
      status: false,
      params: {},
      maxlength: 200,
      minlength: 2,
      isEmpty: true,
    }
  },
  watch: {
    content() {
      if (this.content.length > this.minlength) {
        this.isEmpty = false
      } else {
        this.isEmpty = true
      }
    },
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  onLoad(options) {
    this.params = {
      ...options,
    }
    this.getNoteList()
  },
  methods: {
    // 列表
    getNoteList() {
      this.$edu.api
        .getCourseNoteList({
          section_id: this.params.sid,
          type: this.params.type,
          page: this.params.page,
          count: this.params.count,
        })
        .then((res) => {
          const { data } = res
          let note = data.data.find((item) => item.id == this.params.id)
          this.content = note.content
          this.status = Boolean(note.open_status)
        })
    },
    addNote() {
      this.$edu.api
        .putCourseNote(this.params.id, {
          content: this.content,
          open_status: Number(this.status),
        })
        .then((res) => {
          this.$u.toast(res.msg)
          this.$u.route({
            type: 'navigateBack',
          })
        })
        .catch((res) => {
          this.$u.toast(res.msg)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.header-btn {
  font-size: 30rpx;
  font-weight: 400;
  margin-right: 30rpx;
}
.note-wrapper {
  padding: 30rpx;
  height: calc(100vh - 44px - 98rpx);
  background-color: #fff;
}
.note-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 98rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
}
</style>
